import React, { Component } from 'react';
import QueueAnim from 'rc-queue-anim';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools, Icon, List, WhiteSpace } from 'weaver-mobile';

import { menuIcon } from './util';

const { callApi, getLabel } = Tools;
const { Item } = List;

@inject('listStore')
@inject('menuStore')
@withRouter
@observer
export default class Menu extends Component {
  static defaultProps = {
    prefixCls: 'email-menu',
  }

  componentDidMount() {
    callApi({
      url: '/api/email/base/getEmailMenuByMobile',
    }).then(res => {
      const { menuStore } = this.props;
      const { emobj } = res;
      const { menuList } = emobj;
      menuStore.setState({ menuList });
    });
  }

  goRoute = (key, id) => {
    const { history, listStore } = this.props;
    if (key) {
      let params = null;// 此处不再处理收件箱、发件箱等固定参数的合并问题，合并移至list中。
      if (id) {
        if (key === 'folder') {
          params = {menu_folderid: id, folderid: id };
          listStore.setState({ folderid: id });
        } else if (key === 'tag') {
          params = {menu_labelid: id, labelid: id };
          listStore.setState({ labelid: id });
        } 
      }
      listStore.setState({ searchParams: params || {} });
      history.push(`/${key}`);
    }
  }

  renderIcon = (icon, key) => {
    const { prefixCls } = this.props;
    if (!icon) { return ; }
    let iconCom;
    if (icon.indexOf('#') !== -1) {
      iconCom = (<div style={{ background: icon }} className={`${prefixCls}-list-item-icon-label`} />);
    } else {
      iconCom = (<Icon type={menuIcon[key] || icon} />);
    }
    return (
      <div className={`${prefixCls}-list-item-icon ${icon.indexOf('#') !== -1 ? 'label' : ''}`}>
        {iconCom}
      </div>
    );
  }

  renderMenuList = (list) => {
    const { prefixCls } = this.props;
    const { groupTitle, groupItems } = list;
    return (
      <div className={`${prefixCls}-list`} key={groupTitle || groupItems.length}>
        <List renderHeader={groupTitle && <div className={`${prefixCls}-list-title`}>{groupTitle}</div>}>
          {groupItems.length > 0 && groupItems.map(item => 
            <Item key={item.id || item.key} arrow="horizontal" thumb={this.renderIcon(item.icon, item.key)} onClick={() => this.goRoute(item.key, item.id)}>
              <div className={`${prefixCls}-list-item`}>
                <div className={`${prefixCls}-list-item-label`}>{item.label}</div>
                {!!item.num && <div className={`${prefixCls}-list-item-num`}>{item.num}</div>}
              </div>
            </Item>
          )}
        </List>
        <WhiteSpace />
      </div>
    );
  }

  render() {
    const { history, prefixCls, menuStore } = this.props;
    const { menuList } = menuStore;
    return (
      <QueueAnim type="left">
        <div className={`${prefixCls} wm-route-layout`} key="email-menu">
          <div className={`${prefixCls}-body`}>
            <div className={`${prefixCls}-header`}>
              <div className={`${prefixCls}-header-title`}>{getLabel(71,'邮件')}</div>
              <div className={`${prefixCls}-header-setting`}>
                <Icon type={menuIcon.setting} onClick={() => history.push('/setting')} />
              </div>
            </div>
            {menuList.length > 0 && menuList.map(list => this.renderMenuList(list))}
          </div>
          <div className={`${prefixCls}-bar`} onClick={() => history.push('/new')}>
            <Icon type={menuIcon.write} />
          </div>
        </div>
      </QueueAnim>
    );
  }
}